import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class MtTitle extends StatelessWidget {
  MtTitle({super.key});

  List titles = [
    {'title': '点菜', 'subTitle': '', 'isActive': true},
    {'title': '评价', 'subTitle': '666', 'isActive': false},
    {'title': '商家', 'subTitle': '', 'isActive': false},
  ];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: double.infinity,
        height: 60,
        child: Row(
          children: [
            //左
            Expanded(
                flex: 1,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: titles.map((item) {
                    return _title(
                        item['title'], item['subTitle'], item['isActive']);
                  }).toList(),
                )),
            //搜索
            _search(),
          ],
        ));
  }

//标题
  Widget _title(String title, String subTitle, bool isActive) {
    return SizedBox(
      height: 60,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            children: [
              Text(
                title,
                style: const TextStyle(fontSize: 16),
              ),
              Text(
                subTitle,
                style: const TextStyle(fontSize: 12, color: Colors.black38),
              )
            ],
          ),
          const SizedBox(height: 5),
          isActive
              ? Container(
                  width: 33,
                  height: 2,
                  color: Colors.yellow,
                )
              : Container(
                  width: 33,
                  height: 2,
                  color: Colors.transparent,
                )
        ],
      ),
    );
  }

//搜索
  Widget _search() {
    return Container(
      width: 120,
      height: 30,
      padding: const EdgeInsets.symmetric(horizontal: 10),
      decoration: const BoxDecoration(
          color: Colors.black12,
          borderRadius: BorderRadius.all(Radius.circular(20))),
      child: const Row(
        children: [
          Icon(
            Icons.search,
            size: 16,
            color: Colors.black38,
          ),
          SizedBox(
            width: 5,
          ),
          Text(
            '搜索',
            style: TextStyle(fontSize: 12, color: Colors.black38),
          ),
        ],
      ),
    );
  }
}
